<template>
  <div style="width: 50%">
    <div class="card" style="padding: 30px">
      <el-form :model="data.user" label-width="100px" style="padding-right: 50px">
        <el-form-item label="手机号">
          <el-input disabled v-model="data.user.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="data.user.username" autocomplete="off" />
        </el-form-item>
        <div style="text-align: center">
          <el-button type="primary" @click="save">保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {reactive, onMounted} from "vue"
import request from "@/utils/request";
import {ElMessage} from "element-plus";

// 文件上传的接口地址
const data = reactive({
  user: {}
})

onMounted(() => {
  try {
    const userData = localStorage.getItem('system-user');
    if(userData) {
      data.user = JSON.parse(userData);
    }
  } catch (error) {
    console.error('JSON解析失败:', error);
    ElMessage.error('数据解析失败，请联系管理员');
  }
})

const emit = defineEmits(["updateUser"])
// 把当前修改的用户信息存储到后台数据库
const save = () => {
  // 验证用户名不能为空
  if (!data.user.username || data.user.username.trim() === '') {
    ElMessage.error('用户名不能为空')
    return
  }

  // 验证用户名不能包含逗号（中文或英文）
  if (data.user.username.includes(',') || data.user.username.includes('，')) {
    ElMessage.error('无法在用户名中添加逗号')
    return
  }

  // 获取原始用户信息进行比较
  const originalUser = JSON.parse(localStorage.getItem('system-user') || '{}')

  // 如果用户名发生了变化，显示二次确认弹窗
  if (originalUser.username !== data.user.username) {
    ElMessageBox.confirm(
      `是否将用户名修改为"${data.user.username}"？`,
      '确认修改',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        // 用户确认后，执行更新操作
        updateUser()
      })
      .catch(() => {
        // 用户取消操作
        ElMessage.info('已取消修改')
      })
  } else {
    // 如果用户名没有变化，直接更新
    updateUser()
  }
}

// 更新用户信息的函数
const updateUser = async () => {
  try {
    // 显示加载状态
    const loading = ElMessage({
      message: '更新中...',
      type: 'info',
      duration: 0,
      showClose: false
    });

    const res = await request.put('/api/users/update', data.user);
    loading.close();

    if (res.code === '200') {
      ElMessage.success('更新成功');
      //把更新后的用户信息存储到缓存
      localStorage.setItem('system-user', JSON.stringify(data.user));
      emit('updateUser');
    } else {
      // 处理特定错误情况
      if (res.msg && (res.msg.includes('已存在') || res.msg.includes('SQLIntegrityConstraintViolationException') || res.msg.includes('duplicate entry'))) {
        ElMessage.error('用户名已存在');
      } else {
        ElMessage.error(res.msg || '更新失败');
      }
    }
  } catch (error) {
    // 记录错误信息到控制台（非错误级别）
    console.info({
      message: '用户信息更新错误',
      error: error.message,
      timestamp: new Date().toISOString(),
      type: 'user_update_error'
    });

    // 处理不同类型的错误
    if (error.response) {
      // 服务器响应错误
      const status = error.response.status;
      const data = error.response.data;
      
      switch (status) {
        case 400:
          ElMessage.error(data.msg || '请求参数错误，请检查输入信息');
          break;
        case 401:
          ElMessage.error('身份验证失败，请重新登录');
          break;
        case 403:
          ElMessage.error('权限不足，无法修改用户信息');
          break;
        case 409:
          ElMessage.error('用户名已存在，请选择其他用户名');
          break;
        case 422:
          ElMessage.error(data.msg || '数据验证失败');
          break;
        case 500:
          ElMessage.error('服务器内部错误，请稍后重试');
          break;
        case 503:
          ElMessage.error('服务暂时不可用，请稍后重试');
          break;
        default:
          ElMessage.error(data.msg || `更新失败 (错误代码: ${status})`);
      }
    } else if (error.request) {
      // 网络错误
      if (error.code === 'ECONNABORTED') {
        ElMessage.error('请求超时，请检查网络连接后重试');
      } else if (error.message.includes('Network Error')) {
        ElMessage.error('网络连接失败，请检查网络设置');
      } else {
        ElMessage.error('网络请求失败，请稍后重试');
      }
    } else {
      // 其他错误
      ElMessage.error('更新用户信息时发生未知错误，请稍后重试');
    }
  }
}
</script>

<style scoped>

</style>